/**
 * Created by Administrator on 2017/2/16.
 */
import React, {Component, PropTypes} from 'react';
import {Header} from '../header/header'
import {orderDetails} from '../../scripts/orderDetails'
import {getQueryString} from '../../scripts/url';
import {initFunction,fade} from '../../scripts/tip';
import {BtnBottom} from '../prodcut/productDetails'

export default class OrderDetails extends Component {
    componentDidMount() {

        initFunction();
        fade();
        layer.closeAll();

        var url=location.href;

        //TODO getProductId
        var orderId=getQueryString("orderId",url);

        var orderNumber=getQueryString("orderNumber",url);

        orderDetails(orderId,orderNumber);

        $('.noneAddr .titleWrap ').click(function(){

        });

        $('.reward ').on('click','.radioBtn',function(){

            if($(this).hasClass('noSelect')){

                $(this).removeClass('noSelect')
            }else {
                $(this).addClass('noSelect')
            }
        })
    }

    render(){
        return <div className="OrderDetails">
            <Header headerTitle="订单详情" className="back" />
            <OrderDetailsList />
        </div>
    }
}

export  class OrderDetailsList extends Component {
    render() {
        return <div className="OrderDetailsList fadeaction">
                <OrderDetailsStatus />
                <OrderDetailsAddr />
                <OrderDetailsProduct />
               <OrderDetailsPay />
               <OrderDetailsPayBtn />
            <BtnBottom btnTitle='重新购买'className="BuyBtn"/>
        </div>
    }
}


export  class OrderDetailsStatus extends Component {
    render(){
        return <div className="OrderDetailsStatus ">
            <div className="statusWrap">
                <div className="status">订单状态：待付款</div>
            </div>
            <div className="orderN">订单号：4005545555</div>
            <div className="orderP">订单金额：￥123</div>
            <div className="orderCtime">下单时间：2017-02-16 19:41</div>
        </div>
    }
}

export  class OrderDetailsAddr extends Component {
    render(){
        return <div className="OrderDetailsAddrWrap ">
           <div className="OrderDetailsAddr border  ExistingAddr ">
               <div>
                   <span className="name">收货人：张婷婷</span>
                   <span className="phone">13645605126</span>
               </div>
               <div className="detailsAddr">收货地址：合肥市高新区梦园小区</div>
               <div className="freightCompany">快递公司：</div>
               <div className="freightId">快递单号：</div>
           </div>
        </div>
    }
}


export  class OrderDetailsProduct extends Component {
    render(){
        return <div className="MyOrderList">
            <ul>
                <li>
                    <div className="liWrap border">
                        <div className="orderDetails border-tb ">
                            <div className="order-imge cell">
                                <div className="product-img">
                                </div>
                            </div>
                            <div className="order-name cell">
                                <h1>乐骑互联网码表X1有线版</h1>
                                <h2>
                                    <span>X1配件</span>
                                    <span>支架+磁头</span>
                                </h2>
                            </div>
                            <div className="order-price cell">
                                <h1>￥118</h1>
                                <h2>X1</h2>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    }
}




export  class OrderDetailsPay extends Component {

      render(){
            return <div className=" OrderDetailsPayWrap">
               <div className="OrderDetailsPay border">
                  <div className="payWayWrap border-tb">
                      <div className="payWay ">
                          支付宝
                          <i className="icon icon-select">
                          </i>
                      </div>
                  </div>
                   <div className="payDetails">
                       <p >
                           <span>商品售价：</span>
                           <span className="productPrice">￥118</span>
                       </p>
                       <p>
                           <span>红包抵扣：</span>
                           <span className="productReward">-￥2.9</span>
                       </p>
                       <p>
                           <span>抵用券抵扣：</span>
                           <span className="productVoucherMoney">-￥10</span>
                       </p>
                       <p>
                           <span>运费：</span>
                           <span  className="productFteight">+￥0</span>
                       </p>
                       <p>
                           <span>实付款：</span>
                           <span className="productRealPice">￥118</span>
                       </p>
                   </div>
               </div>
            </div>
    }
}

export  class OrderDetailsPayBtn extends Component {
  render(){
      return <div className="OrderDetailsPayBtn">
          <a href="javascript:;" className="cancelOrder cancelBtn">取消订单</a>
          <a href="javascript:;" className="confirmBuy buyBtn">确认付款</a>
      </div>
  }
}